<script setup>
	import comTitle from "./common/headerTitle.vue"
	import {
		ref
	} from 'vue';

	const progress = ref(0);
	const otherPlayers = ref([{
			image: '/static/logo.png',
			name: '玩家4',
			score: '1.99M'
		},
		{
			image: '/static/logo.png',
			name: '玩家5',
			score: '1.87M'
		},
		{
			image: '/static/logo.png',
			name: '玩家6',
			score: '1.86M'
		},
		{
			image: '/static/logo.png',
			name: '玩家7',
			score: '1.82M'
		},
	]);
</script>


<template>
	<view class="container">
		<!-- 顶部标题栏 -->
		<view class="header">
			<comTitle></comTitle>
		</view>

		<!-- 中间内容 -->
		<view class="content">
			<view class="time-box">
				<view class="time-box-item" v-for="i in 4" :key="i">
					<view class="time-num-box">
						05
					</view>
					<view style="margin: 3rpx 0;">
						Day
					</view>
				</view>
			</view>


			<!-- 奖励和规则按钮 -->
			<view class="m-box">
				<view class="btn-box">rewards</view>
				<view class=""
					style="flex:1;display: flex;justify-content: center;align-items: center;padding-top: 20rpx;">
					<image class="trophy-image" src="/static/logo.png"></image>
				</view>
				<view class="btn-box btn-r-box">rules</view>
			</view>


			<!-- 奖杯图片和进度条 -->
			<view class="trophy-section">
				<view class="trophy-section-box">
					<view class=""
						style="width: 80rpx;height: 80rpx;border-radius: 50%; background-color: red;border: 8rpx solid #f0c54e;z-index: 2;margin-right: -20rpx;">

					</view>
					<view class=" "
						style="flex: 1;height: 60rpx; display: flex;justify-content: center;align-items: center;background-color: pink;border:8rpx solid #f0c54e ;">
						<text>0/800</text>
					</view>
					<view class="" style="height: 90rpx; width: 90rpx;border-radius: 50%;margin-left: -20rpx;">
						<image src="../../static/logo.png" style="width: 100%; height: 100%;border-radius: 50%;"
							mode=""></image>
					</view>
				</view>

			</view>

			<!-- 排行榜按钮 -->
			<view class="ranking-buttons">
				<button class="ranking-button active">巴西榜</button>
				<button class="ranking-button">世界榜</button>
			</view>

			<!-- 排行榜 -->
			<view class="ranking">
				<view class="rank-item">
					<image class="rank-image" src="/static/logo.png"></image>
					<text class="rank-name">玩家1</text>
					<text class="rank-score">1.82M</text>
				</view>
				<view class="rank-item">
					<image class="rank-image" src="/static/logo.png"></image>
					<text class="rank-name">玩家2</text>
					<text class="rank-score">1.82M</text>
				</view>
				<view class="rank-item">
					<image class="rank-image" src="/static/logo.png"></image>
					<text class="rank-name">玩家3</text>
					<text class="rank-score">1.82M</text>
				</view>

				<!-- 其他玩家列表 -->
				<view class="other-ranks">
					<view class="other-rank-item" v-for="(player, index) in otherPlayers" :key="index">
						<text class="rank-position">{{ index + 4 }}</text>
						<image class="player-image" :src="player.image"></image>
						<text class="player-name">{{ player.name }}</text>
						<text class="player-score">{{ player.score }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>



<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #2b2b2b;
		color: white;
	}

	.header {
		margin-top: 20px;
	}

	.time-box {
		background-color: #520c06;
		height: 115rpx;
		width: 45vw;
		margin: 0 auto;
		padding: 0 20rpx;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* padding-bottom: 10rpx; */
	}

	.time-box-item {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.time-num-box {
		width: 100%;
		flex: 1;
		background-image: url("../../static/logo.png");
		background-size: 80% 80%;
		background-position: center;
		background-repeat: no-repeat;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.m-box {
		height: 200rpx;
		width: 100vw;
		background-color: red;
		display: flex;

		.btn-box {
			width: 175rpx;
			height: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0;
			background-color: transparent;
			color: #fff;
			background-image: url("../../static/1.png");
			background-size: 100%;
			background-position: center;
			background-repeat: no-repeat;
		}

		.btn-r-box {
			background-image: url("../../static/2.png");
		}



	}




	// .reward-button,
	// .rules-button {
	// 	background-color: #ffcc00;
	// 	border: none;
	// 	padding: 10px 20px;
	// 	border-radius: 20px;
	// 	font-size: 18px;
	// 	color: black;
	// }

	.trophy-section {
		width: 80vw;
		height: 125rpx;
		margin: 0 auto;
		background-color: #247474;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 5rpx 10rpx;

		.trophy-section-box {
			width: 100%;
			height: 80%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: blueviolet
		}
	}

	.trophy-image {
		width: 150rpx;
		height: 150rpx;
	}

	.progress-bar {
		width: 80%;
		height: 20px;
		background-color: #333;
		border-radius: 10px;
		margin-top: 10px;
		position: relative;
	}

	.progress-fill {
		height: 100%;
		background-color: #ffcc00;
		border-radius: 10px;
	}

	.progress-text {
		margin-top: 10px;
	}

	.ranking-buttons {
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}

	.ranking-button {
		padding: 10px 20px;
		margin: 0 10px;
		border-radius: 20px;
		background-color: #444;
		color: white;
		font-size: 16px;
	}

	.ranking-button.active {
		background-color: #ffcc00;
		color: black;
	}

	.ranking {
		width: 100%;
		padding: 20px;
		background-color: #222;
		border-radius: 20px;
		margin-top: 20px;
	}

	.rank-item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.rank-image {
		width: 50px;
		height: 50px;
		border-radius: 25px;
		margin-right: 10px;
	}

	.rank-name {
		font-size: 18px;
		flex: 1;
	}

	.rank-score {
		font-size: 18px;
		color: #ffcc00;
	}

	.other-ranks {
		margin-top: 20px;
	}

	.other-rank-item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.rank-position {
		margin-right: 10px;
		font-size: 18px;
	}

	.player-image {
		width: 40px;
		height: 40px;
		border-radius: 20px;
		margin-right: 10px;
	}

	.player-name {
		font-size: 16px;
		flex: 1;
	}

	.player-score {
		font-size: 16px;
		color: #ffcc00;
	}
</style>